<template>
  <div class="detail">
    <div class="detail-wrap">
      <!-- 周单量环比情况 -->
      <div class="chart-item flex-column">
        <div class="date-picker mb-10">
          <el-date-picker
            v-model="dateValue"
            type="daterange"
            value-format="YYYY-MM-DD"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dateChange"
            style="width: 240px"
          ></el-date-picker>
        </div>
        <p class="title">
          一、周期单量环比情况
          <span
            class="ml-5"
            style="color: #f22; font-size: 14px; font-weight: normal"
            >(注：本周期为所选时间范围数据，时间范围如选12月1号~12月-7号，则上周期为11月24号~11月30号数据)</span
          >
        </p>
        <p class="chart-title mt-5">各仓库签收订单环比</p>
        <div class="chart-wrap">
          <BaseEcharts key="first" :chart-options="options" />
        </div>
      </div>

      <!-- 订单分布 -->
      <div
        v-for="(item, index) of orderList"
        :key="index"
        class="chart-item flex-column"
      >
        <template v-if="index === 0">
          <p class="title" v-if="index === 0">二、订单分布</p>
          <div class="chart-row flex mt-5" ref="orderRef">
            <div class="order-chart-first flex-column">
              <p class="chart-title">{{ item.firstTitle }}</p>
              <BaseEcharts
                :key="index + 'order'"
                :chart-options="item.pieOptions"
                style="flex: 1; border: 1px dashed #ddd; box-sizing: border-box"
              />
            </div>
            <div class="order-chart-second flex-column">
              <p class="chart-title">{{ item.secondTitle }}</p>
              <BaseEcharts
                :key="index + 'order'"
                :chart-options="item.options"
                style="flex: 1; border: 1px dashed #ddd; box-sizing: border-box"
              />
            </div>
          </div>
        </template>

        <template v-else-if="index === 1">
          <div class="chart-row flex mt-5">
            <div class="chart-first flex-column">
              <p class="chart-title">{{ item.title }}</p>
              <BaseEcharts
                :key="index + 'order'"
                :chart-options="item.options"
                style="flex: 1; border: 1px dashed #ddd; box-sizing: border-box"
              />
            </div>
          </div>
        </template>

        <template v-else-if="index === 2">
          <div class="chart-row flex mt-5">
            <div class="order-chart-first flex-column">
              <p class="chart-title">{{ item.firstTitle }}</p>
              <BaseEcharts
                :key="index + 'order'"
                :chart-options="item.options"
                style="flex: 1; border: 1px dashed #ddd; box-sizing: border-box"
              />
            </div>
            <div class="order-chart-second table-wrap flex-column">
              <p class="chart-title">{{ item.secondTitle }}</p>
              <el-table
                key="first-table"
                border
                :data="topData"
                :header-cell-style="{
                  color: '#000',
                }"
                :span-method="spanMethod"
                style="flex: 1"
              >
                <el-table-column
                  prop="channel"
                  min-width="160"
                  align="center"
                  label="销售渠道"
                >
                  <template #default="scope">
                    <p
                      :style="{
                        color:
                          scope.$index === topData.length - 1 ? '#000' : '',
                        fontWeight:
                          scope.$index === topData.length - 1
                            ? 'bold'
                            : 'normal',
                      }"
                    >
                      {{ scope.row.channel }}
                    </p>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  width="90"
                  prop="plat_form"
                  label="渠道"
                />
                <el-table-column
                  align="center"
                  width="120"
                  prop="count"
                  label="订单数量"
                >
                  <template #default="scope">
                    <p
                      :style="{
                        color:
                          scope.$index === topData.length - 1 ? '#000' : '',
                        fontWeight:
                          scope.$index === topData.length - 1
                            ? 'bold'
                            : 'normal',
                      }"
                    >
                      {{ scope.row.count }}
                    </p>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  width="90"
                  prop="percent"
                  label="订单占比"
                >
                  <template #default="scope">
                    <p
                      :style="{
                        color:
                          scope.$index === topData.length - 1 ? '#000' : '',
                        fontWeight:
                          scope.$index === topData.length - 1
                            ? 'bold'
                            : 'normal',
                      }"
                    >
                      {{ scope.row.percent + "%" }}
                    </p>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="sign_pay"
                  width="140"
                  label="付款-签收"
                />
              </el-table>
            </div>
          </div>
        </template>

        <template v-else-if="index === 3">
          <div class="chart-row flex mt-5">
            <div class="chart-first flex-column" style="max-width: 50%">
              <p class="chart-title">{{ item.firstTitle }}</p>
              <BaseEcharts
                :key="index + 'order'"
                :chart-options="item.options"
                style="flex: 1; border: 1px dashed #ddd; box-sizing: border-box"
              />
            </div>
          </div>
        </template>
      </div>

      <!-- 周度时效环比 -->
      <div class="chart-item flex-column">
        <p class="title">三、周度时效环比</p>
        <div class="chart-wrap flex mt-5" style="border: none" ref="thirdRef">
          <div class="chart-first flex-column">
            <p class="chart-title">到货时长H-BY仓库</p>
            <BaseEcharts
              key="third-1"
              :chart-options="warehouseOptions"
              style="flex: 1; border: 1px dashed #ddd; box-sizing: border-box"
            />
          </div>
          <div class="chart-second flex-column">
            <p class="chart-title">到货时长H-BY省份</p>
            <BaseEcharts
              key="third-2"
              :chart-options="thirdOptions"
              style="flex: 1; border: 1px dashed #ddd; box-sizing: border-box"
            />
          </div>
        </div>
      </div>

      <!-- 订单履行环节时长 -->
      <div class="chart-item flex-column">
        <p class="title" ref="fourthRef">四、订单履行环节时长</p>
        <div class="chart-row flex mt-5">
          <div class="chart-first flex-column">
            <p class="chart-title">支付-揽收时长</p>
            <BaseEcharts
              key="third-1"
              :chart-options="fourthOptions"
              style="flex: 1; border: 1px dashed #ddd; box-sizing: border-box"
            />
          </div>
          <div class="chart-second flex-column">
            <p class="chart-title">签收时长占比</p>
            <BaseEcharts
              key="third-1"
              :chart-options="fourthOptions1"
              style="flex: 1; border: 1px dashed #ddd; box-sizing: border-box"
            />
          </div>
        </div>
      </div>

      <!-- 省份时效达成 -->
      <div
        class="chart-item flex-column"
        v-for="(item, index) of chartList"
        :key="index"
      >
        <p class="title" v-if="index === 0" ref="timeRef">五、省份时效达成</p>
        <div class="chart-row flex mt-5">
          <div class="chart-first flex-column">
            <p class="chart-title">{{ item.firstTitle }}</p>
            <BaseEcharts
              :key="index + '0'"
              :chart-options="item.options"
              style="flex: 1; border: 1px dashed #ddd; box-sizing: border-box"
            />
          </div>
          <div class="chart-second flex-column">
            <p class="chart-title">{{ item.secondTitle }}</p>
            <BaseEcharts
              :key="index + '1'"
              :chart-options="item.options1"
              style="flex: 1; border: 1px dashed #ddd; box-sizing: border-box"
            />
          </div>
        </div>
      </div>

      <!-- 快递发货占比 -->
      <div class="chart-item flex-column">
        <p class="title">六、快递发货占比</p>
        <div class="chart-row flex mt-5" ref="lastRef">
          <div class="order-chart-first flex-column">
            <p class="chart-title">快递公司发货情况</p>
            <BaseEcharts
              key="third-1"
              :chart-options="pieOptions"
              style="flex: 1; border: 1px dashed #ddd; box-sizing: border-box"
            />
          </div>
          <div class="order-chart-second flex-column">
            <p class="chart-title">各仓库快递公司发货情况</p>
            <BaseEcharts
              key="third-1"
              :chart-options="sixthOptions"
              style="flex: 1; border: 1px dashed #ddd; box-sizing: border-box"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

import {
  getWeekOrder,
  getOrderPie,
  getOrderProvince,
  getOrderFlow,
  getOrderDistribute,
  getOrderTopTen,
  getOrderRate,
  getProvinceDelivery,
  getWarehouseDelivery,
  getDeliveryRate,
  getDeliveryRateOfWareHouse,
  getSignCollect,
  getSignCollectTime,
  getArriveTime,
  getReceiveTime,
} from "@/api/supplyChain/logisticsDetail";
import { getLastFifteenDayRange } from "@/utils/date";
import { formatNumber } from "@/utils/handleNumber";
import { calculate } from "@/utils/math";

const orderRef = ref(null);
const thirdRef = ref(null);
const fourthRef = ref(null);
const timeRef = ref(null);
const lastRef = ref(null);

const handleIntersection = (entries, observer) => {
  entries.forEach((entry, index) => {
    if (entry.isIntersecting) {
      console.log(entry.target.innerText, "==");
      if (entry.target.innerText.startsWith("仓库订单占比")) {
        getOrderList();
      }
      if (entry.target.innerText.startsWith("到货时长H-BY仓")) {
        getDeliveryList();
      }
      if (entry.target.innerText.startsWith("四、订单履行环节")) {
        getPayList();
      }
      if (entry.target.innerText.startsWith("五、省份时效达成")) {
        getTimeList();
      }
      if (entry.target.innerText.startsWith("快递公司发货情况")) {
        getProportionList();
      }
      // 如果只需检测一次，可以在此处停止观察
      observer.unobserve(entry.target);
    }
  });
};

async function getOrderList() {
  let params = {
    startTime: dateValue.value[0],
    endTime: dateValue.value[1],
  };
  let res = await getOrderPie(params);
  if (res.code === 0) {
    orderList.value[0].pieOptions.title.text = formatNumber(res.total_count);
    orderList.value[0].pieOptions.series[0].data = res.data.map((item) => ({
      name: item.ware_house,
      value: item.count,
      number: formatNumber(item.count),
      percent: item.percent + "%",
    }));
  }

  let res1 = await getOrderProvince(params);
  if (res1.code === 0) {
    orderList.value[0].options.xAxis.data = res1.data.map(
      (item) => item.province
    );
    orderList.value[0].options.series[0].data = res1.data.map(
      (item) => item.count
    );
    orderList.value[0].options.series[1].data = res1.data.map(
      (item) => item.percent
    );
  }

  let res2 = await getOrderFlow(params);
  if (res2.code === 0) {
    let xDataList = res2.data.map((item) => item.province);
    orderList.value[1].options.xAxis.data = xDataList;
    orderList.value[1].options.legend.data = res2.warehouse_list.map(
      (item) => ({ name: item })
    );
    for (let i = 0; i < res2.warehouse_list.length; i++) {
      let name = res2.warehouse_list[i];
      let list = [];
      res2.data.forEach((item, index) => {
        list[index] = {};
        let valueObj = item.children.find((c) => c.warehouse === name);
        if (valueObj) {
          list[index] = {
            value: calculate
              .multiply(100, valueObj.count / item.total_count)
              .toFixed(2),
            num: valueObj.count,
          };
        } else {
          list[index] = {
            value: 0,
            num: 0,
          };
        }
      });
      orderList.value[1].options.series[i] = {
        color: "",
        type: "bar",
        stack: "warehouse",
        smooth: true,
        symbol: "none",
        name: res2.warehouse_list[i],
        barWidth: 20,
        data: list,
      };
    }
    orderList.value[1].options.series[0].color = "#5B9BD5";
    orderList.value[1].options.series[1].color = "#ED7D31";
    orderList.value[1].options.series[2].color = "#b8b8b8";
  }

  let res3 = await getOrderDistribute(params);
  if (res3.code === 0) {
    orderList.value[2].options.series[0].data = res3.data.map((item) => ({
      name: item.plat_form,
      value: item.count,
      number: formatNumber(item.count),
      percent: item.percent + "%",
    }));
  }

  let res4 = await getOrderTopTen(params);
  if (res4.code === 0) {
    topData.value = res4.data;
    let total1 = res4.data.reduce((item, accr) => {
      return (item += accr.count);
    }, 0);
    let total = res4.data.reduce((item, accr) => {
      return (item += accr.percent);
    }, 0);
    console.log(total);
    topData.value.push({
      channel: "合计",
      count: total1,
      percent: total.toFixed(2),
    });
  }

  let res5 = await getOrderRate(params);
  if (res5.code === 0) {
    orderList.value[3].options.title.text = formatNumber(res5.total_count);
    orderList.value[3].options.series[0].data = res5.data.map((item) => ({
      name: item.delivery_wah,
      value: item.count,
      number: formatNumber(item.count),
      percent: item.percent + "%",
    }));
  }
}

async function getDeliveryList() {
  let params = {
    time_begin: dateValue.value[0],
    time_end: dateValue.value[1],
  };
  let res = await getProvinceDelivery(params);
  let res1 = await getWarehouseDelivery(params);
  if (res.code === 0) {
    thirdOptions.value.xAxis.data = res.data.map((item) => item.province);
    thirdOptions.value.series[0].data = res.data.map(
      (item) => item.avg_sign_pay_time
    );
    thirdOptions.value.series[1].data = res.data.map(
      (item) => item.the_country
    );
    thirdOptions.value.series[2].data = res.data.map((item) =>
      (item.period_over_period * 100).toFixed(1)
    );
  }

  if (res1.code === 0) {
    warehouseOptions.value.xAxis.data = res1.data.map(
      (item) => item.delivery_wah
    );
    warehouseOptions.value.series[0].data = res1.data.map(
      (item) => item.avg_sign_pay_time_week_ago
    );
    warehouseOptions.value.series[1].data = res1.data.map(
      (item) => item.avg_sign_pay_time
    );
    warehouseOptions.value.series[2].data = res1.data.map((item) =>
      (item.period_over_period * 100).toFixed(1)
    );
  }
}

async function getPayList() {
  let params = {
    time_begin: dateValue.value[0],
    time_end: dateValue.value[1],
  };
  getSignCollect(params).then((res) => {
    if (res.code === 0) {
      fourthOptions1.value.xAxis.data = res.data.map(
        (item) => item.delivery_wah
      );
      fourthOptions1.value.series[0].data = res.data.map((item) =>
        (item.order_amount_ls_24h * 100).toFixed(0)
      );
      fourthOptions1.value.series[1].data = res.data.map((item) =>
        (item.order_amount_ls_48h * 100).toFixed(0)
      );
      fourthOptions1.value.series[2].data = res.data.map((item) =>
        (item.order_amount_ls_72h * 100).toFixed(0)
      );
      fourthOptions1.value.series[3].data = res.data.map((item) =>
        (item.order_amount_ls_g72h * 100).toFixed(0)
      );
    }
  });

  getSignCollectTime(params).then((res) => {
    if (res.code === 0) {
      console.log(res);
      fourthOptions.value.xAxis.data = res.data.map(
        (item) => item.delivery_wah
      );
      fourthOptions.value.series[0].data = res.data.map(
        (item) => item.avg_audit_pay_time
      );
      fourthOptions.value.series[1].data = res.data.map(
        (item) => item.avg_consign_audit_time
      );
      fourthOptions.value.series[2].data = res.data.map(
        (item) => item.avg_collect_consign_time
      );
    }
  });
}

async function getTimeList() {
  let params = {
    startDataDate: dateValue.value[0],
    endDataDate: dateValue.value[1],
  };
  let res = await getArriveTime({
    ...params,
    deliveryWah: "南京仓",
  });
  let res1 = await getReceiveTime({
    ...params,
    deliveryWah: "南京仓",
  });
  if (res.code === 0) {
    chartList.value[0].options.xAxis.data = res.data.map(
      (item) => item.province
    );
    chartList.value[0].options.series[0].data = res.data.map((item) => ({
      value: calculate.divide(item.order_amount_qs_24h, item.amount),
      num: item.order_amount_qs_24h,
    }));
    chartList.value[0].options.series[1].data = res.data.map((item) => ({
      value: calculate.divide(item.order_amount_qs_48h, item.amount),
      num: item.order_amount_qs_48h,
    }));
    chartList.value[0].options.series[2].data = res.data.map((item) => ({
      value: calculate.divide(item.order_amount_qs_72h, item.amount),
      num: item.order_amount_qs_72h,
    }));
    chartList.value[0].options.series[3].data = res.data.map((item) => ({
      value: calculate.divide(item.order_amount_qs_g72h, item.amount),
      num: item.order_amount_qs_g72h,
    }));
    chartList.value[0].options.series[4].data = res.data.map((item) => ({
      num: item.avg_sign_pay,
      value: item.avg_sign_pay,
    }));
  }
  if (res1.code === 0) {
    chartList.value[0].options1.xAxis.data = res1.data.map(
      (item) => item.province
    );
    chartList.value[0].options1.series[0].data = res1.data.map(
      (item) => item.avg_sign_collect
    );
    chartList.value[0].options1.series[1].data = res1.data.map(
      (item) => item.sign_num
    );
  }

  let res2 = await getArriveTime({
    ...params,
    deliveryWah: "广东肇庆仓",
  });
  if (res2.code === 0) {
    chartList.value[1].options.xAxis.data = res2.data.map(
      (item) => item.province
    );
    chartList.value[1].options.series[0].data = res2.data.map((item) => ({
      value: calculate.divide(item.order_amount_qs_24h, item.amount),
      num: item.order_amount_qs_24h,
    }));
    chartList.value[1].options.series[1].data = res2.data.map((item) => ({
      value: calculate.divide(item.order_amount_qs_48h, item.amount),
      num: item.order_amount_qs_48h,
    }));
    chartList.value[1].options.series[2].data = res2.data.map((item) => ({
      value: calculate.divide(item.order_amount_qs_72h, item.amount),
      num: item.order_amount_qs_72h,
    }));
    chartList.value[1].options.series[3].data = res2.data.map((item) => ({
      value: calculate.divide(item.order_amount_qs_g72h, item.amount),
      num: item.order_amount_qs_g72h,
    }));
    chartList.value[1].options.series[4].data = res2.data.map((item) => ({
      num: item.avg_sign_pay,
      value: item.avg_sign_pay,
    }));
  }

  let res3 = await getReceiveTime({
    ...params,
    deliveryWah: "广东肇庆仓",
  });
  if (res3.code === 0) {
    chartList.value[1].options1.xAxis.data = res3.data.map(
      (item) => item.province
    );
    chartList.value[1].options1.series[0].data = res3.data.map(
      (item) => item.avg_sign_collect
    );
    chartList.value[1].options1.series[1].data = res3.data.map(
      (item) => item.sign_num
    );
  }

  let res4 = await getArriveTime({
    ...params,
    deliveryWah: "金华仓",
  });

  if (res4.code === 0) {
    chartList.value[2].options.xAxis.data = res4.data.map(
      (item) => item.province
    );
    chartList.value[2].options.series[0].data = res4.data.map((item) => ({
      value: calculate.divide(item.order_amount_qs_24h, item.amount),
      num: item.order_amount_qs_24h,
    }));
    chartList.value[2].options.series[1].data = res4.data.map((item) => ({
      value: calculate.divide(item.order_amount_qs_48h, item.amount),
      num: item.order_amount_qs_48h,
    }));
    chartList.value[2].options.series[2].data = res4.data.map((item) => ({
      value: calculate.divide(item.order_amount_qs_72h, item.amount),
      num: item.order_amount_qs_72h,
    }));
    chartList.value[2].options.series[3].data = res4.data.map((item) => ({
      value: calculate.divide(item.order_amount_qs_g72h, item.amount),
      num: item.order_amount_qs_g72h,
    }));
    chartList.value[2].options.series[4].data = res4.data.map((item) => ({
      num: item.avg_sign_pay,
      value: item.avg_sign_pay,
    }));
  }

  let res5 = await getReceiveTime({
    ...params,
    deliveryWah: "金华仓",
  });
  if (res5.code === 0) {
    chartList.value[2].options1.xAxis.data = res5.data.map(
      (item) => item.province
    );
    chartList.value[2].options1.series[0].data = res5.data.map(
      (item) => item.avg_sign_collect
    );
    chartList.value[2].options1.series[1].data = res5.data.map(
      (item) => item.sign_num
    );
  }
}

async function getProportionList() {
  let params = {
    startDataDate: dateValue.value[0],
    endDataDate: dateValue.value[1],
  };
  let res = await getDeliveryRate(params);
  let res1 = await getDeliveryRateOfWareHouse(params);
  if (res.code === 0) {
    let total = res.data.reduce((accr, item) => {
      return (accr += item.order_amount);
    }, 0);
    pieOptions.value.series[0].data = res.data.map((item) => ({
      name: item.logistic_name,
      value: item.order_amount,
      number: formatNumber(item.order_amount),
      percent: (calculate.divide(item.order_amount, total) * 100).toFixed(1),
    }));
  }
  if (res1.code === 0) {
    console.log(res1.data);
    let xDataList = res1.data.map((item) => item.delivery_wah);
    sixthOptions.value.xAxis.data = xDataList;
    sixthOptions.value.legend.data = res1.logistic_name_list.map((item) => ({
      name: item,
    }));
    for (let i = 0; i < res1.logistic_name_list.length; i++) {
      let name = res1.logistic_name_list[i];
      let list = [];
      res1.data.forEach((item, index) => {
        list[index] = {};
        let valueObj = item.logistic_list.find((c) => c.logistic_name === name);
        if (valueObj) {
          list[index] = {
            value: calculate
              .multiply(100, valueObj.order_amount / item.total_order_amount)
              .toFixed(1),
            num: valueObj.order_amount,
          };
        } else {
          list[index] = {
            value: 0,
            num: 0,
          };
        }
      });
      sixthOptions.value.series[i] = {
        color: "",
        type: "bar",
        stack: "warehouse",
        smooth: true,
        symbol: "none",
        name: res1.logistic_name_list[i],
        barWidth: 40,
        data: list,
        label: {
          show: true,
          formatter: (params) => {
            if (params.value == 0) {
              return "";
            } else {
              return params.value + "%";
            }
          },
        },
      };
    }
    sixthOptions.value.series[0].color = "#5B9BD5";
    sixthOptions.value.series[1].color = "#ED7D31";
    sixthOptions.value.series[2].color = "#b8b8b8";
  }
}

onMounted(() => {
  dateChange();
});

const dateValue = ref(getLastFifteenDayRange());
function dateChange() {
  const observer = new IntersectionObserver(handleIntersection, {
    root: null,
    rootMargin: "0px",
    threshold: 0.1,
  });
  if (orderRef.value) {
    observer.observe(orderRef.value[0]);
  }
  if (thirdRef.value) {
    observer.observe(thirdRef.value);
  }

  if (fourthRef.value) {
    observer.observe(fourthRef.value);
  }

  if (timeRef.value) {
    observer.observe(timeRef.value[0]);
  }

  if (lastRef.value) {
    observer.observe(lastRef.value);
  }
  getList();
}
function getList() {
  if (dateValue.value && dateValue.value.length !== 0) {
    getWeekOrder({
      startTime: dateValue.value[0],
      endTime: dateValue.value[1],
    }).then((res) => {
      if (res.code === 0) {
        let xList = res.data.map((item) => item.warehouse);
        options.value.xAxis.data = xList;
        let data1 = res.data.map((item) => item.last_week_order_num);
        let data2 = res.data.map((item) => item.this_week_order_num);
        let data3 = res.data.map((item) => item.order_chain_ratio);
        options.value.series[0].data = data1;
        options.value.series[1].data = data2;
        options.value.series[2].data = data3;
        console.log(options.value, "==");
      }
    });
  }
}

const options = ref({
  grid: {
    top: "8%",
  },
  legend: {
    show: true,
    data: [
      {
        name: "上周期",
      },
      {
        name: "本周期",
      },
      {
        name: "环比",
      },
    ],
    bottom: "3%",
    left: "center",
    itemWidth: 30,
    itemHeight: 10,
  },
  xAxis: {
    type: "category",
    data: [],
    axisLabel: {
      interval: 0,
    },
  },
  yAxis: [
    {
      type: "value",
      name: "订单数",
    },
    {
      type: "value",
      name: "环比(%)",
    },
  ],
  tooltip: {
    trigger: "axis",
  },
  series: [
    {
      type: "bar",
      smooth: true,
      symbol: "none",
      color: "#5B9BD5",
      name: "上周期",
      barWidth: 40,
      data: [],
    },
    {
      type: "bar",
      smooth: true,
      symbol: "none",
      color: "#ED7D31",
      name: "本周期",
      barWidth: 40,
      data: [],
    },
    {
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 10,
      yAxisIndex: 1,
      color: "#B8B8B8",
      lineStyle: {
        width: 3,
      },
      name: "环比",
      data: [],
    },
  ],
});

const orderList = ref([
  {
    firstTitle: "仓库订单占比",
    secondTitle: "订单省份分布情况",
    pieOptions: {
      title: {
        text: "",
        left: "center",
        top: "center",
        textStyle: {
          fontSize: 36,
          color: "red",
        },
      },
      legend: { show: false },
      tooltip: {
        formatter: (params) => {
          return `"${params.data.name}"值：${params.data.number}`;
        },
      },
      series: [
        {
          name: "仓库订单占比",
          type: "pie",
          radius: ["50%", "60%"],
          hoverAnimation: false,
          color: [
            "#5B9BD5",
            "#ED7D31",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
          ],
          label: {
            normal: {
              formatter: function (params, ticket, callback) {
                return "{black|" + params.name + "}\n\n" + params.percent + "%";
              },
              rich: {
                black: {
                  color: "#333",
                  padding: [2, 4],
                  fontSize: 16,
                  align: "center",
                },
              },
            },
          },
          labelLine: {
            normal: {
              length: 25,
              length2: 10,
              lineStyle: {
                color: "#ccc",
              },
            },
          },
          data: [],
        },
      ],
    },
    options: {
      grid: {
        top: "8%",
      },
      legend: {
        show: false,
      },
      xAxis: {
        type: "category",
        data: [],
        axisLabel: {
          formatter: function (value) {
            return value.split("").join("\n"); // 将每个字符用换行符连接
          },
        },
      },
      yAxis: [
        {
          type: "value",
          name: "订单数量",
        },
        {
          type: "value",
          axisLabel: {
            formatter: "{value}%",
          },
          name: "订单占比(%)",
        },
      ],
      tooltip: {
        trigger: "axis",
      },
      series: [
        {
          type: "bar",
          smooth: true,
          symbol: "none",
          color: "#5B9BD5",
          name: "订单数量",
          barWidth: 20,
          label: {
            show: true,
            position: "top",
          },
          data: [],
        },
        {
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 10,
          yAxisIndex: 1,
          color: "#ED7D31",
          lineStyle: {
            width: 3,
          },
          label: {
            position: "bottom",
            formatter: "{c}%",
          },
          name: "订单占比(%)",
          data: [],
        },
      ],
    },
  },
  {
    title: "流向单量仓占比",
    options: {
      grid: {
        bottom: "20%",
      },
      legend: {
        show: true,
        data: [],
        bottom: "3%",
        left: "center",
        itemWidth: 10,
        itemHeight: 10,
      },
      xAxis: {
        type: "category",
        data: [],
        axisLabel: {
          formatter: function (value) {
            return value.split("").join("\n"); // 将每个字符用换行符连接
          },
        },
      },
      yAxis: [
        {
          type: "value",
          axisLabel: {
            formatter: "{value}%",
          },
        },
      ],
      tooltip: {
        trigger: "item",
        formatter: (params) => {
          return `"${params.name}" - "${params.seriesName}"值为：${params.data.num}`;
        },
      },
      series: [],
    },
  },
  {
    firstTitle: "各平台签收订单分布",
    options: {
      title: {
        text: "",
        left: "center",
        top: "center",
        textStyle: {
          fontSize: 36,
        },
      },
      legend: {
        show: false,
      },
      tooltip: {
        formatter: (params) => {
          return `"${params.data.name}"值：${params.data.number}`;
        },
      },
      series: [
        {
          name: "订单分布",
          type: "pie",
          radius: "50%",
          hoverAnimation: false,
          color: [
            "#5B9BD5",
            "#ED7D31",
            "#B8B8B8",
            "#c487ee",
            "#deb140",
            "#49dff0",
            "#034079",
            "#6f81da",
            "#00ffb4",
          ],
          label: {
            normal: {
              formatter: function (params, ticket, callback) {
                return "{black|" + params.name + "}\n\n" + params.percent + "%";
              },
              rich: {
                black: {
                  color: "#333",
                  padding: [2, 4],
                  fontSize: 16,
                  align: "center",
                },
              },
            },
          },
          labelLine: {
            normal: {
              length: 25,
              length2: 10,
              lineStyle: {
                color: "#ccc",
              },
            },
          },
          data: [],
        },
      ],
    },
    secondTitle: "签收订单TOP10销售渠道",
  },
  {
    firstTitle: "各仓库发货数量占比",
    options: {
      title: {
        text: "",
        left: "center",
        top: "center",
        textStyle: {
          fontSize: 36,
          color: "red",
        },
      },
      legend: { show: false },
      tooltip: {
        formatter: (params) => {
          return `"${params.data.name}"值：${params.data.number}`;
        },
      },
      series: [
        {
          name: "仓库订单占比",
          type: "pie",
          radius: ["50%", "60%"],
          hoverAnimation: false,
          color: [
            "#5B9BD5",
            "#ED7D31",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
            "#B8B8B8",
          ],
          label: {
            normal: {
              formatter: function (params, ticket, callback) {
                return "{black|" + params.name + "}\n\n" + params.percent + "%";
              },
              rich: {
                black: {
                  color: "#333",
                  padding: [2, 4],
                  fontSize: 16,
                  align: "center",
                },
              },
            },
          },
          labelLine: {
            normal: {
              length: 25,
              length2: 10,
              lineStyle: {
                color: "#ccc",
              },
            },
          },
          data: [],
        },
      ],
    },
  },
]);
function spanMethod({ row, column, rowIndex, columnIndex }) {
  let lastRowIndex = topData.value.length - 1;
  if (rowIndex === lastRowIndex) {
    if (columnIndex === 0) {
      return [1, 2];
    } else if (columnIndex === 1) {
      return [0, 0];
    }
  }
}
const topData = ref([]);
const warehouseOptions = ref({
  grid: {
    bottom: "20%",
  },
  legend: {
    show: true,
    data: [
      {
        name: "上周期",
      },
      {
        name: "本周期",
      },
      {
        name: "环比",
      },
    ],
    bottom: "3%",
    left: "center",
    itemWidth: 30,
    itemHeight: 10,
  },
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: [
    {
      type: "value",
      name: "时长",
    },
    {
      type: "value",
      name: "环比",
      axisLabel: {
        formatter: "{value}%",
      },
    },
  ],
  tooltip: {
    trigger: "axis",
  },
  series: [
    {
      type: "bar",
      smooth: true,
      symbol: "none",
      color: "#5B9BD5",
      name: "上周期",
      barWidth: 20,
      data: [],
    },
    {
      type: "bar",
      smooth: true,
      symbol: "none",
      color: "#ED7D31",
      name: "本周期",
      barWidth: 20,
      data: [],
    },
    {
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 10,
      yAxisIndex: 1,
      color: "#B8B8B8",
      lineStyle: {
        width: 3,
      },
      name: "环比",
      data: [],
    },
  ],
});
const thirdOptions = ref({
  grid: {
    bottom: "20%",
  },
  legend: {
    show: true,
    data: [
      {
        name: "时效h:付款-签收",
      },
      {
        name: "全国",
      },
      {
        name: "环比",
      },
    ],
    bottom: "3%",
    left: "center",
    itemWidth: 30,
    itemHeight: 10,
  },
  xAxis: {
    type: "category",
    data: [],
    axisLabel: {
      formatter: function (value) {
        return value.split("").join("\n"); // 将每个字符用换行符连接
      },
    },
  },
  yAxis: [
    {
      type: "value",
      name: "时长",
    },
    {
      type: "value",
      name: "环比",
      axisLabel: {
        formatter: "{value}%",
      },
    },
  ],
  tooltip: {
    trigger: "axis",
  },
  series: [
    {
      type: "bar",
      smooth: true,
      symbol: "none",
      color: "#5B9BD5",
      name: "时效h:付款-签收",
      barWidth: 20,
      data: [],
    },
    {
      type: "line",
      smooth: true,
      symbol: "none",
      color: "#ED7D31",
      name: "全国",
      symbolSize: 10,
      lineStyle: {
        width: 3,
      },
      data: [],
    },
    {
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 10,
      yAxisIndex: 1,
      color: "#06B254",
      lineStyle: {
        width: 3,
      },
      name: "环比",
      data: [],
    },
  ],
});

const fourthOptions = ref({
  grid: {
    bottom: "20%",
  },
  legend: {
    show: true,
    data: [
      {
        name: "付款-复核",
      },
      {
        name: "复核-发货",
      },
      {
        name: "发货-揽收",
      },
    ],
    bottom: "3%",
    left: "center",
    itemWidth: 10,
    itemHeight: 10,
  },
  xAxis: {
    type: "category",
    data: [],
    axisLabel: {},
  },
  yAxis: [
    {
      type: "value",
      name: "时长",
    },
  ],
  tooltip: {
    trigger: "axis",
  },
  series: [
    {
      type: "bar",
      stack: "warehouse",
      smooth: true,
      symbol: "none",
      color: "#5B9BD5",
      name: "付款-复核",
      label: {
        show: true,
      },
      barWidth: 30,
      data: [],
    },
    {
      type: "bar",
      stack: "warehouse",
      smooth: true,
      color: "#ED7D31",
      name: "复核-发货",
      label: {
        show: true,
      },
      data: [],
    },
    {
      type: "bar",
      stack: "warehouse",
      smooth: true,
      color: "#A5A5A5",
      label: {
        show: true,
      },
      name: "发货-揽收",
      data: [],
    },
  ],
});

const fourthOptions1 = ref({
  grid: {
    bottom: "20%",
  },
  legend: {
    show: true,
    data: [
      {
        name: "24H签收占比",
      },
      {
        name: "48H签收占比",
      },
      {
        name: "72H签收占比",
      },
      {
        name: ">72H签收占比",
      },
    ],
    bottom: "3%",
    left: "center",
    itemWidth: 10,
    itemHeight: 10,
  },
  xAxis: {
    type: "category",
    data: [],
    axisLabel: {
      interval: 0,
    },
  },
  yAxis: [
    {
      type: "value",
      name: "占比",
      axisLabel: {
        formatter: "{value}%",
      },
    },
  ],
  tooltip: {
    trigger: "axis",
  },
  series: [
    {
      type: "bar",
      stack: "warehouse",
      smooth: true,
      symbol: "none",
      color: "#5B9BD5",
      name: "24H签收占比",
      label: {
        show: true,
        formatter: (params) => {
          if (params.value === "0") {
            return "";
          } else {
            return params.value + "%";
          }
        },
      },
      barWidth: 40,
      data: [],
    },
    {
      type: "bar",
      stack: "warehouse",
      smooth: true,
      color: "#ED7D31",
      name: "48H签收占比",
      label: {
        show: true,
        formatter: (params) => {
          if (params.value === "0") {
            return "";
          } else {
            return params.value + "%";
          }
        },
      },
      data: [],
    },
    {
      type: "bar",
      stack: "warehouse",
      smooth: true,
      color: "#A5A5A5",
      name: "72H签收占比",
      label: {
        show: true,
        formatter: (params) => {
          if (params.value === "0") {
            return "";
          } else {
            return params.value + "%";
          }
        },
      },
      data: [],
    },
    {
      type: "bar",
      stack: "warehouse",
      smooth: true,
      label: {
        show: true,
        formatter: (params) => {
          if (params.value === "0") {
            return "";
          } else {
            return params.value + "%";
          }
        },
      },
      color: "#FFC000",
      name: ">72H签收占比",
      data: [],
    },
  ],
});

const pieOptions = ref({
  legend: {
    show: false,
  },
  tooltip: {
    formatter: (params) => {
      return `"${params.data.name}"值：${params.data.number}`;
    },
  },
  series: [
    {
      name: "快递公司发货情况",
      type: "pie",
      radius: ["50%", "60%"],
      hoverAnimation: false,
      color: [
        "#5B9BD5",
        "#ED7D31",
        "#B8B8B8",
        "#B8B8B8",
        "#B8B8B8",
        "#B8B8B8",
        "#B8B8B8",
        "#B8B8B8",
        "#B8B8B8",
        "#B8B8B8",
        "#B8B8B8",
        "#B8B8B8",
        "#B8B8B8",
      ],
      label: {
        normal: {
          formatter: function (params, ticket, callback) {
            return "{black|" + params.name + "}\n\n" + params.percent + "%";
          },
          rich: {
            black: {
              color: "#333",
              padding: [2, 4],
              fontSize: 16,
              align: "center",
            },
          },
        },
      },
      labelLine: {
        normal: {
          length: 25,
          length2: 10,
          lineStyle: {
            color: "#ccc",
          },
        },
      },
      data: [],
    },
  ],
});

const sixthOptions = ref({
  grid: {
    bottom: "20%",
  },
  legend: {
    show: true,
    data: [],
    bottom: "3%",
    left: "center",
    itemWidth: 10,
    itemHeight: 10,
  },
  xAxis: {
    type: "category",
    data: [],
    axisLabel: {},
  },
  yAxis: [
    {
      type: "value",
      axisLabel: {
        formatter: "{value}%",
      },
    },
  ],
  tooltip: {
    trigger: "item",
    formatter: (params) => {
      console.log(params);
      return `"${params.name}" - "${params.seriesName}"值为：${params.data.num}`;
    },
  },
  series: [],
});

const chartList = ref([
  {
    firstTitle: "南京仓到货时长H",
    secondTitle: "南京仓-签收达成H",
    options: {
      grid: {
        bottom: "20%",
      },
      legend: {
        show: true,
        data: [
          {
            name: "24H签收占比",
          },
          {
            name: "48H签收占比",
          },
          {
            name: "72H签收占比",
          },
          {
            name: ">72H签收占比",
          },
          {
            name: "时效h:付款-签收",
          },
        ],
        bottom: "3%",
        left: "center",
        itemWidth: 30,
        itemHeight: 10,
      },
      xAxis: {
        type: "category",
        data: [],
        axisLabel: {
          formatter: function (value) {
            return value.split("").join("\n"); // 将每个字符用换行符连接
          },
          interval: 1,
        },
      },
      yAxis: [
        {
          type: "value",
          max: 2,
          min: 0,
        },
        {
          type: "value",
          max: 150,
          min: -150,
        },
      ],
      tooltip: {
        trigger: "item",
        formatter: (params) => {
          return `"${params.name}" - "${params.seriesName}"值为：${params.data.num}`;
        },
      },
      series: [
        {
          type: "bar",
          stack: "warehouse",
          smooth: true,
          symbol: "none",
          color: "#ED7D31",
          name: "24H签收占比",
          barWidth: 10,
          data: [],
        },
        {
          type: "bar",
          stack: "warehouse",
          smooth: true,
          color: "#A5A5A5",
          name: "48H签收占比",
          data: [],
        },
        {
          type: "bar",
          stack: "warehouse",
          smooth: true,
          color: "#FFC000",
          name: "72H签收占比",
          data: [],
        },
        {
          type: "bar",
          stack: "warehouse",
          smooth: true,
          color: "#4472C4",
          name: ">72H签收占比",
          data: [],
        },
        {
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 10,
          yAxisIndex: 1,
          color: "#5B9BD5",
          lineStyle: {
            width: 3,
          },
          name: "时效h:付款-签收",
          data: [],
        },
      ],
    },
    options1: {
      grid: {
        bottom: "20%",
      },
      legend: {
        show: true,
        data: [
          {
            name: "仓库签收时效",
          },
          {
            name: "快递大网时效",
          },
        ],
        bottom: "3%",
        left: "center",
        itemWidth: 30,
        itemHeight: 10,
      },
      xAxis: {
        type: "category",
        data: [],
        axisLabel: {
          formatter: function (value) {
            return value.split("").join("\n"); // 将每个字符用换行符连接
          },
          interval: 1,
        },
      },
      yAxis: [
        {
          type: "value",
          name: "",
        },
      ],
      tooltip: {
        trigger: "axis",
      },
      series: [
        {
          type: "line",
          areaStyle: {
            opacity: 1,
          },
          smooth: true,
          symbol: "none",
          color: "#5B9BD5",
          name: "仓库签收时效",
          data: [],
        },
        {
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 10,
          lineStyle: {
            width: 3,
          },
          color: "#ED7D31",
          name: "快递大网时效",
          data: [],
        },
      ],
    },
  },
  {
    firstTitle: "肇庆仓到货时长H",
    secondTitle: "肇庆仓-签收达成H",
    options: {
      grid: {
        bottom: "20%",
      },
      legend: {
        show: true,
        data: [
          {
            name: "24H签收占比",
          },
          {
            name: "48H签收占比",
          },
          {
            name: "72H签收占比",
          },
          {
            name: ">72H签收占比",
          },
          {
            name: "时效h:付款-签收",
          },
        ],
        bottom: "3%",
        left: "center",
        itemWidth: 30,
        itemHeight: 10,
      },
      xAxis: {
        type: "category",
        data: [],
        axisLabel: {
          formatter: function (value) {
            return value.split("").join("\n"); // 将每个字符用换行符连接
          },
          interval: 1,
        },
      },
      yAxis: [
        {
          type: "value",
          max: 2,
          min: 0,
        },
        {
          type: "value",
          max: 150,
          min: -150,
        },
      ],
      tooltip: {
        trigger: "item",
        formatter: (params) => {
          return `"${params.name}" - "${params.seriesName}"值为：${params.data.num}`;
        },
      },
      series: [
        {
          type: "bar",
          stack: "warehouse",
          smooth: true,
          symbol: "none",
          color: "#ED7D31",
          name: "24H签收占比",
          barWidth: 10,
          data: [],
        },
        {
          type: "bar",
          stack: "warehouse",
          smooth: true,
          color: "#A5A5A5",
          name: "48H签收占比",
          data: [],
        },
        {
          type: "bar",
          stack: "warehouse",
          smooth: true,
          color: "#FFC000",
          name: "72H签收占比",
          data: [],
        },
        {
          type: "bar",
          stack: "warehouse",
          smooth: true,
          color: "#4472C4",
          name: ">72H签收占比",
          data: [],
        },
        {
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 10,
          yAxisIndex: 1,
          color: "#5B9BD5",
          lineStyle: {
            width: 3,
          },
          name: "时效h:付款-签收",
          data: [],
        },
      ],
    },
    options1: {
      grid: {
        bottom: "20%",
      },
      legend: {
        show: true,
        data: [
          {
            name: "仓库签收时效",
          },
          {
            name: "快递大网时效",
          },
        ],
        bottom: "3%",
        left: "center",
        itemWidth: 30,
        itemHeight: 10,
      },
      xAxis: {
        type: "category",
        data: [],
        axisLabel: {
          formatter: function (value) {
            return value.split("").join("\n"); // 将每个字符用换行符连接
          },
          interval: 1,
        },
      },
      yAxis: [
        {
          type: "value",
          name: "",
        },
      ],
      tooltip: {
        trigger: "axis",
      },
      series: [
        {
          type: "line",
          areaStyle: {
            opacity: 1,
          },
          smooth: true,
          symbol: "none",
          color: "#5B9BD5",
          name: "仓库签收时效",
          data: [],
        },
        {
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 10,
          lineStyle: {
            width: 3,
          },
          color: "#ED7D31",
          name: "快递大网时效",
          data: [],
        },
      ],
    },
  },
  {
    firstTitle: "金华仓到货时长H",
    secondTitle: "金华仓-签收达成H",
    options: {
      grid: {
        bottom: "20%",
      },
      legend: {
        show: true,
        data: [
          {
            name: "24H签收占比",
          },
          {
            name: "48H签收占比",
          },
          {
            name: "72H签收占比",
          },
          {
            name: ">72H签收占比",
          },
          {
            name: "时效h:付款-签收",
          },
        ],
        bottom: "3%",
        left: "center",
        itemWidth: 30,
        itemHeight: 10,
      },
      xAxis: {
        type: "category",
        data: [],
        axisLabel: {
          formatter: function (value) {
            return value.split("").join("\n"); // 将每个字符用换行符连接
          },
          interval: 1,
        },
      },
      yAxis: [
        {
          type: "value",
          max: 2,
          min: 0,
        },
        {
          type: "value",
          max: 150,
          min: -150,
        },
      ],
      tooltip: {
        trigger: "item",
        formatter: (params) => {
          return `"${params.name}" - "${params.seriesName}"值为：${params.data.num}`;
        },
      },
      series: [
        {
          type: "bar",
          stack: "warehouse",
          smooth: true,
          symbol: "none",
          color: "#ED7D31",
          name: "24H签收占比",
          barWidth: 10,
          data: [],
        },
        {
          type: "bar",
          stack: "warehouse",
          smooth: true,
          color: "#A5A5A5",
          name: "48H签收占比",
          data: [],
        },
        {
          type: "bar",
          stack: "warehouse",
          smooth: true,
          color: "#FFC000",
          name: "72H签收占比",
          data: [],
        },
        {
          type: "bar",
          stack: "warehouse",
          smooth: true,
          color: "#4472C4",
          name: ">72H签收占比",
          data: [],
        },
        {
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 10,
          yAxisIndex: 1,
          color: "#5B9BD5",
          lineStyle: {
            width: 3,
          },
          name: "时效h:付款-签收",
          data: [],
        },
      ],
    },
    options1: {
      grid: {
        bottom: "20%",
      },
      legend: {
        show: true,
        data: [
          {
            name: "仓库签收时效",
          },
          {
            name: "快递大网时效",
          },
        ],
        bottom: "3%",
        left: "center",
        itemWidth: 30,
        itemHeight: 10,
      },
      xAxis: {
        type: "category",
        data: [],
        axisLabel: {
          formatter: function (value) {
            return value.split("").join("\n"); // 将每个字符用换行符连接
          },
          interval: 1,
        },
      },
      yAxis: [
        {
          type: "value",
          name: "",
        },
      ],
      tooltip: {
        trigger: "axis",
      },
      series: [
        {
          type: "line",
          areaStyle: {
            opacity: 1,
          },
          smooth: true,
          symbol: "none",
          color: "#5B9BD5",
          name: "仓库签收时效",
          data: [],
        },
        {
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 10,
          lineStyle: {
            width: 3,
          },
          color: "#ED7D31",
          name: "快递大网时效",
          data: [],
        },
      ],
    },
  },
]);
</script>

<style scoped lang="less">
@border-color: #ddd;

@keyframes rate {
  from {
    transform: rotateZ(90deg);
  }

  to {
    transform: rotateX(0);
  }
}
.detail {
  height: 100%;
  overflow: auto;

  &-wrap {
    height: 100%;
    overflow: auto;
    padding: 0 2%;

    :deep(.el-table) {
      border: 1px dashed @border-color;
      border-right-color: transparent;

      &__cell {
        border-right: 1px dashed @border-color;
        border-bottom: 1px dashed @border-color;
      }

      th {
        border-bottom: 1px dashed @border-color;
      }
    }

    .chart-item {
      height: 100%;
      padding-bottom: 24px;
      box-sizing: border-box;
      overflow: auto;

      .title {
        font-weight: bold;
      }

      .chart-title {
        font-weight: bold;
        font-size: 18px;
        text-align: center;
        background-color: #9bc2e6;
        padding: 8px 0;
      }

      .chart-wrap {
        flex: 1;
        border: 1px dashed @border-color;

        .chart-first {
          width: 35%;
          min-width: 559px;
        }

        .chart-second {
          margin-left: 50px;
          flex: 1;
          min-width: 988px;
        }
      }

      .desc {
        padding: 15px 5px;
        border: 1px dashed @border-color;
        border-top-color: transparent;
        font-weight: bold;
      }

      .chart-row {
        flex: 1;
        max-height: 100%;

        .order-chart-first {
          width: 35%;
          min-width: 35%;
          max-width: 35%;
        }

        .order-chart-second {
          flex: 1;
          margin-left: 50px;
          min-width: 987px;

          &.table-wrap {
            max-width: calc(65% - 50px);
          }
        }

        .chart-first {
          flex: 1;
          min-width: 559px;
        }

        .chart-second {
          margin-left: 50px;
          flex: 1;
          min-width: 988px;
        }
      }
    }
  }
}
</style>
